<template>
    <navigator :url="`/pages/cms/article_detail?id=${id}`">
        <view class="item-box bg-white flex px-[20rpx] py-[32rpx]">
            <view class="mr-[20rpx]" v-if="item.image">
                <u-image
                    :src="item.image"
                    width="160"
                    height="100"
                    mode="aspectFit"
                ></u-image>
            </view>
            <view class="item-content flex flex-col justify-between flex-1">
                <view
                    class="item-content-title text-lg font-medium w-[360rpx]"
                    >{{ item.title }}</view
                >
                <view
                    class="item-content-desc text-gray-400 text-sm mt-[16rpx]"
                >
                    {{ item.desc }}
                </view>
                <view
                    class="text-muted text-xs w-full flex justify-between mt-[12rpx]"
                >
                    <view>{{ item.create_time }}</view>
                    <view class="flex items-center">
                        <u-icon name="eye" class="w-[30rpx] h-[30rpx]"></u-icon>
                        <view class="ml-[10rpx]">{{
                            item.init_hits + item.actual_hits
                        }}</view>
                    </view>
                </view>
            </view>
        </view>
    </navigator>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        item: any;
        id: number;
    }>(),
    {
        item: {},
        id: 0,
    }
);
</script>

<style lang="scss" scoped>
.item-box {
    border-bottom: 1px solid #f8f8f8;

    .item-content-title {
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
    }

    .item-content-desc {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
}
</style>
